<template>
  <div>
    <Header @on-click="toUserCenter" :menuColor="menuColor" />
    <div :class="signClass">
      <div class="forms-container">
        <div class="signin-signup">
          <!-- 登录后台管理系统的表单 -->
          <div class="form">
            <el-form
              class="sign-in-form"
              ref="adminFormRef"
              @keyup.enter="submitMS(adminFormRef)"
              :rules="rules"
              :model="state.adminForm"
            >
              <h3 class="title">用户登录</h3>
              <el-form-item prop="username">
                <el-input
                  v-model="state.adminForm.username"
                  placeholder="请输入用户名"
                  :prefix-icon="UserFilled"
                />
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input
                  type="password"
                  :prefix-icon="HelpFilled"
                  v-model="state.adminForm.password"
                  placeholder="请输入密码"
                  show-password
                />
              </el-form-item>
              <el-form-item prop="code">
                <div
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                  "
                >
                  <el-input
                    v-model="state.adminForm.code"
                    type="captchaCode"
                    placeholder="验证码输入"
                    class="captchaCode"
                  ></el-input>
                  <div class="capt_image">
                    <el-image
                      :src="'data:image/gif;base64,' + base64Image"
                      alt="图形验证码"
                    />
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button
                  :loading="loading"
                  class="btn solid"
                  @click="submitMS(adminFormRef)"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <!-- 登录用户中心的表单 -->
          <div class="form">
            <el-form
              class="sign-up-form"
              ref="ucFormRef"
              @keyup.enter="submitUC(ucFormRef)"
              :rules="ucRules"
              :model="state.ucForm"
            >
              <h2 class="title" style="font-weight: 600">用户中心</h2>
              <el-form-item prop="username">
                <el-input
                  v-model="state.ucForm.username"
                  placeholder="请输入用户名"
                />
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input
                  type="password"
                  v-model="state.ucForm.password"
                  placeholder="请输入密码"
                  show-password
                />
              </el-form-item>
              <!-- <el-form-item
                prop="code"
                style="display: flex; flex-direction: row"
              >
                <el-input
                  v-model="state.ucForm.code"
                  type="captchaCode"
                  placeholder="验证码输入"
                  class="captchaCode"
                ></el-input>
                <div class="capt_image">
                  <el-image
                    :src="'data:image/gif;base64,' + base64Image"
                    alt="图形验证码"
                  />
                </div>
              </el-form-item> -->
              <el-form-item>
                <el-button
                  :loading="loading"
                  class="btn"
                  @click="submitUC(ucFormRef)"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="panels-container">
        <div class="panelLogin left-panel">
          <div class="content">
            <div
              style="font-weight: 600; font-size: 2.5rem; align-items: center"
            >
              <!-- <el-icon><Promotion /></el-icon> -->
              <span>博帝运营看板系统</span>
            </div>
            <!-- <p>运营看板系统</p> -->
            <!-- <button
              @click="toUserCenter"
              class="btn transparent"
              id="sign-up-btn"
            >
              前往
            </button> -->
          </div>
          <img src="" class="image" alt="" />
        </div>
        <div class="panelLogin right-panel">
          <div class="content">
            <!-- <h3>后台管理</h3>
            <p>设备管理、检测、系统人员管理</p>
            <button @click="signUP" class="btn transparent" id="sign-in-btn">
              前往
            </button> -->
          </div>
          <img src="" class="image" alt="" />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script setup lang="ts">
import {
  computed,
  onMounted,
  ref,
  reactive,
  toRaw,
  onBeforeUnmount,
} from "vue";
import { useRouter, onBeforeRouteLeave, useRoute } from "vue-router";
import Header from "@/layouts/frontend/components/header.vue";
import Footer from "@/layouts/frontend/components/footer.vue";
//获取用户中心信息的仓库
import { useUserInfo } from "@/store/userInfo";
//引入用户中心功能自定义仓库
import { useMemberCenter } from "@/store/memberCenter";
import { useAdminInfo } from "@/store/adminInfo";
import type { FormInstance, FormRules } from "element-plus";
import { validatorType } from "@/utils/validate";
import { useFrontEnd } from "@/store/frontend/index";
import { useRegion } from "@/store/backend/SysM/region";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { UserFilled, HelpFilled } from "@element-plus/icons-vue";

const router = useRouter();
const memberCenter = useMemberCenter();
const adminInfo = useAdminInfo();
const frontend = useFrontEnd();
const region = useRegion();
const adminFormRef = ref<FormInstance>(); //设备管理平台登录表单
const ucFormRef = ref<FormInstance>(); //用户中心登录表单
const loading = ref<boolean>(false);

let signClass = ref<string>("container");
//小屏幕菜单图标颜色
const menuColor = ref<string>("mColor");
//header字体颜色
const headerColor = ref<string>("white");

const state: {
  adminForm: {
    username: string;
    password: string;
    code: string;
    uuid: string;
  };
  ucForm: {
    username: string;
    password: string;
    code: string;
    uuid: string;
  };
} = reactive({
  adminForm: { username: "", password: "", code: "", uuid: "" },
  ucForm: {
    username: "",
    password: "",
    code: "",
    uuid: "",
  },
});
const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
      type: "string",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
      type: "string",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
      type: "string",
    },
  ],
});
const ucRules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
      type: "string",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
      type: "string",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
      type: "string",
    },
  ],
});
// 切换到用户中心登录页面
const toUserCenter = () => {
  //如果用户已登录直接跳转用户中心
  signClass.value = "container sign-up-mode";
  //路由菜单图标颜色切换为gray
  menuColor.value = "bColor";
  //header字体颜色变为gray
  headerColor.value = "black";
  // }
};
//切换到后台管理登录页面
const signUP = () => {
  //!判断用户是否登录
  signClass.value = "container";
  //路由菜单图标颜色切换为white
  menuColor.value = "mColor";
  //header字体颜色变为white
  headerColor.value = "white";
  // }
};
/**
 * setup+ts的computed
 */
let signMode = computed(() => {});

//获取图形验证码的接口
let base64Image = ref<string>("");

//提交表单 登录用户中心
const submitUC = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      adminInfo
        .login(state.ucForm)
        .then((res: any) => {
          //登录成功后将数据存储到adminIndo仓库与MemberCenter仓库
          loading.value = false;
          router.push({ name: "user" });
        })
        .catch((err: any) => {
          loading.value = false;
          //刷新验证码
          // getCode();
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
//提交表单 登录后台管理系统
const submitMS = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      adminInfo
        .login(state.adminForm)
        .then((res: any) => {
          console.log(res);
          loading.value = false;
          //获取权限查询区域树将id遍历出来
          // region.getRegionByRole().then(() => {
          router.push({ name: "admin" });
          // });
        })
        .catch((err: any) => {
          loading.value = false;
          //刷新验证码
          getCode();
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
//跳转到用户中心之前将跳转的路由数据传递给用户中心当前激活菜单
onBeforeRouteLeave((to, from, next) => {
  memberCenter.setActiveRoute(to);
  next();
});
//获取图片验证码
const getCode = () => {
  frontend.getLogincode().then((res) => {
    base64Image.value = res.img;
    state.adminForm.uuid = res.uuid;
    state.ucForm.uuid = res.uuid;
  });
};
//切换fz为16px
const changeFZ = () => {
  console.log("//切换fz为16px");

  let html = document.documentElement;
  html.style.fontSize = 16 + "px";
};
onMounted(() => {
  //获取图片验证码 赋值uuid
  getCode();
  //在用户注销登录返回首页时，fz为24px 所以要切换fz为16px
  changeFZ();
});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
}

.forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  // background-color: rgba(0, 145, 255, 1);
  background-image: url("@/assets/boardImage/loginBg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  // background-size: 1920px 849px;
  background-size: cover;
  background-origin: border-box;
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.signin-signup {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 75%;
  width: 50%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;

  .form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0rem 5rem;
    transition: all 0.2s 0.7s;
    overflow: hidden;
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    .sign-in-form {
      max-width: 400px;
      width: 100%;
      z-index: 2;
      text-align: center;
      // background-color: #fff;
      // background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
      // backdrop-filter: blur(10px); /* 背景模糊 */
      // -webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
      background-color: transparent;
      border: none;
      border-radius: 5px;
      padding: 3rem 1.5rem;

      .title {
        font-size: 1.9rem;
        // color: #444;
        color: #fff;
        margin-bottom: 10px;
      }

      .el-form-item {
        width: 100%;

        .el-input {
          :deep(.el-input__wrapper) {
            max-width: 380px;
            width: 100%;
            // background-color: #f0f0f0;
            margin: 10px 0;
            height: 55px;
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(228, 228, 228, 1);
            border-radius: 5px;
            // border-radius: 55px;

            .el-input__inner {
              display: grid;
              grid-template-columns: 25% 75%;
              padding: 0 1rem;
              position: relative;
            }

            box-shadow: 0 0 0 1pxvar
              (--el-input-border-color, var(--el-border-color)) inset;
          }
        }

        .el-button {
          text-align: center;
          margin: auto;
        }

        .captchaCode {
          width: 55%;
          display: inline-block;
        }

        .capt_image {
          margin: 10px 0 0 0;
          width: 40%;
        }
      }
    }

    .sign-up-form {
      opacity: 0;
      z-index: 1;
      padding: 0 !important;
      max-width: 380px;
      width: 100%;
      text-align: center;

      .title {
        font-size: 2rem;
        color: #444;
        margin-bottom: 10px;
      }

      .el-form-item {
        width: 100%;

        .el-input {
          :deep(.el-input__wrapper) {
            max-width: 380px;
            width: 100%;
            background-color: #f0f0f0;
            margin: 10px 0;
            height: 55px;
            border-radius: 55px;

            .el-input__inner {
              display: grid;
              grid-template-columns: 25% 75%;
              padding: 0 1rem;
              position: relative;
            }

            box-shadow: 0 0 0 1pxvar
              (--el-input-border-color, var(--el-border-color)) inset;
          }
        }

        .el-button {
          text-align: center;
          margin: auto;
        }
        .captchaCode {
          width: 55%;
          display: inline-block;
        }

        .capt_image {
          width: 40%;
          padding-left: 5px;
        }
      }
    }
  }
}

.social-text {
  padding: 0.7rem 0;
  font-size: 1rem;
}

.social-media {
  display: flex;
  justify-content: center;
}

.social-icon {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #333;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}

.social-icon:hover {
  color: #4481eb;
  border-color: #4481eb;
}

.btn {
  // width: 150px;
  // background-color: gray;
  // border: none;
  // outline: none;
  // height: 49px;
  // border-radius: 49px;
  // color: #fff;
  // text-transform: uppercase;
  // font-weight: 600;
  // margin: 10px 0;
  // cursor: pointer;
  // transition: 0.5s;
  width: 341px;
  height: 50px;
  background: inherit;
  background-color: rgba(64, 158, 255, 1);
  border: none;
  border-radius: 5px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: #ffffff;
  line-height: 20px;
}

.btn:hover {
  // background-color: rgb(191, 191, 38);
  background-color: rgb(108, 179, 250);
}

.panels-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

// .container:before {
//   content: "";
//   position: absolute;
//   height: 2000px;
//   width: 2000px;
//   top: -10%;
//   right: 48%;
//   transform: translateY(-50%);
//   background-image: linear-gradient(-45deg, #146734 0%, #2676bb 100%);
//   transition: 1.8s ease-in-out;
//   border-radius: 50%;
//   z-index: 6;
// }

.image {
  width: 100%;
  transition: transform 1.1s ease-in-out;
  transition-delay: 0.4s;
}

.panelLogin {
  display: flex;
  flex-direction: column;
  // align-items: flex-end;
  justify-content: space-around;
  text-align: center;
  z-index: 6;
}

.left-panel {
  pointer-events: all;
  padding: 3rem 17% 2rem 12%;
}

.right-panel {
  pointer-events: none;
  padding: 3rem 12% 2rem 17%;
}

.panelLogin .content {
  color: #fff;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
}

.panelLogin h3 {
  font-weight: 600;
  line-height: 1;
  font-size: 1.5rem;
}

.panelLogin p {
  font-size: 0.95rem;
  padding: 0.7rem 0;
}

.btn.transparent {
  margin: 0;
  background: none;
  border: 2px solid #fff;
  width: 130px;
  height: 41px;
  font-weight: 600;
  font-size: 0.8rem;
}

.right-panel .image,
.right-panel .content {
  transform: translateX(800px);
}

/* ANIMATION */

.container.sign-up-mode:before {
  transform: translate(100%, -50%);
  right: 52%;
}

.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
  transform: translateX(-800px);
}

.container.sign-up-mode .signin-signup {
  left: 25%;
}

.container.sign-up-mode form.sign-up-form {
  opacity: 1;
  z-index: 2;
}

.container.sign-up-mode form.sign-in-form {
  opacity: 0;
  z-index: 1;
}

.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
  transform: translateX(0%);
}

.container.sign-up-mode .left-panel {
  pointer-events: none;
}

.container.sign-up-mode .right-panel {
  pointer-events: all;
}

@media (max-width: 870px) {
  .container {
    min-height: 800px;
    height: 100vh;
  }

  .signin-signup {
    width: 100%;
    top: 95%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }

  .signin-signup,
  .container.sign-up-mode .signin-signup {
    left: 50%;
  }

  .panels-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }

  .panelLogin {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 2.5rem 8%;
    grid-column: 1 / 2;
  }

  .right-panel {
    grid-row: 3 / 4;
  }

  .left-panel {
    grid-row: 1 / 2;
  }

  .image {
    width: 200px;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;
  }

  .panelLogin .content {
    padding-right: 15%;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.8s;
  }

  .panelLogin h3 {
    font-size: 1.2rem;
  }

  .panelLogin p {
    font-size: 0.7rem;
    padding: 0.5rem 0;
  }

  .btn.transparent {
    width: 110px;
    height: 35px;
    font-size: 0.7rem;
  }

  .container:before {
    width: 1500px;
    height: 1500px;
    transform: translateX(-50%);
    left: 30%;
    bottom: 68%;
    right: initial;
    top: initial;
    transition: 2s ease-in-out;
  }

  .container.sign-up-mode:before {
    transform: translate(-50%, 100%);
    bottom: 32%;
    right: initial;
  }

  .container.sign-up-mode .left-panel .image,
  .container.sign-up-mode .left-panel .content {
    transform: translateY(-300px);
  }

  .container.sign-up-mode .right-panel .image,
  .container.sign-up-mode .right-panel .content {
    transform: translateY(0px);
  }

  .right-panel .image,
  .right-panel .content {
    transform: translateY(300px);
  }

  .container.sign-up-mode .signin-signup {
    top: 5%;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 570px) {
  form {
    padding: 0 1.5rem;
  }

  .image {
    display: none;
  }

  .panelLogin .content {
    padding: 0.5rem 1rem;
  }

  .container {
    padding: 1.5rem;
  }

  .container:before {
    bottom: 72%;
    left: 50%;
  }

  .container.sign-up-mode:before {
    bottom: 28%;
    left: 50%;
  }
}

/**
  首页的Header组件的class为frontIndex 不需要阴影且为透明
  在引用组件的父组件内修改子组件内容，会得到不同样式的子组件
   */
.frontIndex {
  background-color: transparent !important;
  box-shadow: none !important;
  position: fixed;
  width: 100%;
  z-index: 100;

  :deep(.header-logo) {
    span {
      padding-left: 4px;
      color: var(--el-color-white);
    }
  }

  :deep(.frontend-header-menu) {
    background: transparent;

    .el-menu-item,
    .el-sub-menu .el-sub-menu__title {
      // color: var(--el-color-black);
      // color: v-bind(headerColor);
      font-weight: bold;
      transition: 1.8s ease-in-out;

      &.is-active {
        color: var(--el-color-black) !important;
        border: transparent !important;
      }

      &:hover {
        background-color: transparent;
      }
    }
  }

  :deep(.theme-switch) {
    display: none;
  }
}

// 首页的Footer组件的class为footer
.footer {
  color: var(--el-text-color-secondary);
  background-color: transparent !important;
  position: fixed;
  bottom: 0;
}
</style>
